<template>
  <div class="form">
    <Row>
      <Col span="6">
      <Form :model="formItem" :label-width="80">
        <FormItem label="用户名">
          <Input v-model="formItem.username" placeholder="用户名请保持在6~12位。"></Input>
        </FormItem>
        <FormItem label="密码">
          <Input type="password" v-model="formItem.password" placeholder="密码请保持在6~16位。"></Input>
        </FormItem>
        <FormItem label="性别" prop="gender">
          <RadioGroup v-model="formItem.gender">
            <Radio label="male">男</Radio>
            <Radio label="female">女</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="出生日期" prop="date">
          <DatePicker type="date" placeholder="填入或选择日期" v-model="formItem.date"></DatePicker>
        </FormItem>
        <FormItem label="用户权限">
          <Select v-model="formItem.permission_id">
            <Option v-for="item in permissionList" :value="item.id">{{item.permission}}</Option>
          </Select>
        </FormItem>
        <FormItem label="Email">
          <Input v-model="formItem.email" placeholder="输入正确的电子邮箱格式"></Input>
        </FormItem>
        <FormItem label="个人介绍" prop="desc">
          <Input v-model="formItem.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="随便说点什么吧…"></Input>
        </FormItem>
        <FormItem class="button">
          <Button type="ghost" @click="handleReset('formItem')" style="margin-left: 8px">清除</Button>
          <Button type="primary" @click="handleSubmit()">添加</Button>
        </FormItem>
      </Form>
      </Col>
    </Row>
  </div>
</template>
<style>
.form {
  margin-top: 30px;
}

.button {
  float: right;
}

.button button {
  margin-right: 20px;
}
</style>

<script>
import md5 from "js-md5";
export default {
  data() {
    return {
      formItem: {
        username: null,
        password: null,
        permission_id: null,
        email: null,
        desc: null,
        date: "1996-01-01"
      },
      permissionList: []
    };
  },
  methods: {
    isEmail(email) {
      var filter = /^([a-zA-Z0-9_])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
      if (filter.test(email)) {
        return true;
      } else {
        return false;
      }
    },
    handleSubmit() {
      // console.log(this.formItem)
      if (
        this.formItem.username == null ||
        this.formItem.username.length < 6 ||
        this.formItem.username.length > 12
      ) {
        this.$Message.warning("用户名太短，请保持在6~12位。");
        return false;
      } else if (
        this.formItem.password == null ||
        this.formItem.password.length <= 5 ||
        this.formItem.password.length > 16
      ) {
        this.$Message.warning("密码太短，请保持在6~16位。");
        return false;
      } else if (this.formItem.gender == null) {
        this.$Message.warning("请选择你的性别。");
        return false;
      } else if (this.formItem.date == null) {
        this.$Message.warning("日期输入错误。");
        return false;
      } else if (this.formItem.email == null || this.isEmail(this.formItem.email) == false) {
        this.$Message.warning("电子邮箱格式输入错误。");
        return false;
      } else {
        this.formItem.password = md5(this.formItem.password);
        let that = this;
        this.$axios.post("backend/user", this.formItem, function(res) {
          if (res == 1) {
            that.$Message.success("添加用户成功！");
            that.formItem = {};
          } else if (res == 3) {
            that.$Message.error("用户名已被占用，请重新输入。");
          } else {
            that.$Message.success("权限不足，添加用户失败！");
            that.formItem = {};
          }
        });
      }
    },
    getPermission() {
      let that = this;
      this.$axios.get("backend/permission/create", null, function(res) {
        that.permissionList = [];
        for (let i = 0; i < res.length; i++) {
          that.permissionList.push(res[i]);
        }
      });
    },
    handleReset() {
      this.formItem = {};
    }
  },
  mounted() {
    this.$store.commit("bread", "添加用户");
    this.getPermission();
  }
};
</script>
